<script lang="ts" setup>
import { ref, onMounted, computed, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'

import ReTitle from '@/components/ReTitle/index.vue'
import RoleMenu from './components/RoleMenu.vue'

import { _queryRoleDetail, _updateRole } from '@/api/auth'
import { RoleItem } from '@/api/types'
import { rules } from './index'
import { Message } from '@/utils/message'

const route = useRoute()
const roleState = ref<RoleItem>()
const formRef = ref()
const roleId = computed(() => Number(route.params.id))

onBeforeMount(() => {
  queryRoleDetail()
})

const queryRoleDetail = () => {
  _queryRoleDetail(roleId.value)
    .then(res => {
      roleState.value = res.data
    })
    .catch(err => {
      Message.error(err.message)
    })
}

const cancel = () => {
  queryRoleDetail()
}

const updateRole = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        const { id, name, code, description } = roleState.value
        const params = { id, name, code, description }
        _updateRole(params)
          .then(res => {
            Message.success(res.message)
            queryRoleDetail()
            resolve()
          })
          .catch(err => {
            Message.error(err.message)
            reject()
          })
      } else {
        reject()
      }
    })
  })
}
</script>

<template>
  <div class="p-[20px]">
    <h4 class="mb-2">{{ roleState?.name }}</h4>

    <el-scrollbar height="calc(100% - 32px)">
      <ReTitle
        title="基础信息"
        can-operate
        :submit="updateRole"
        @cancel="cancel"
      >
        <template #default="{ status }">
          <el-form
            ref="formRef"
            :model="roleState"
            :rules="rules"
            label-width="100px"
            label-position="right"
          >
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-form-item label="角色名称：" prop="name">
                  <el-input v-if="status" v-model="roleState.name" />
                  <span v-else>{{ roleState?.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-form-item label="角色编码：" prop="code">
                  <el-input v-if="status" v-model="roleState.code" />
                  <span v-else>{{ roleState?.code }}</span>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-form-item label="描述：">
                  <el-input
                    v-if="status"
                    v-model="roleState.description"
                    type="textarea"
                    :rows="2"
                  />
                  <span v-else>{{ roleState?.description || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-form-item label="创建人：">
                  {{ roleState?.createdByName || '-' }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-form-item label="创建时间：">
                  {{
                    dayjs(roleState?.createTime).format('YYYY-MM-DD HH:mm:ss')
                  }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-form-item label="更新人：">
                  {{ roleState?.updatedByName || '-' }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-form-item label="更新时间：">
                  {{
                    dayjs(roleState?.updateTime).format('YYYY-MM-DD HH:mm:ss')
                  }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </ReTitle>

      <RoleMenu :roleId="roleId" />
    </el-scrollbar>
  </div>
</template>
